<script setup lang="ts">
import { computed, PropType, ref, watch } from 'vue'
import {
  useAutoCheckEndOrder,
  useReceiveOrderStrategy,
  useAutoCheckCancelOrder,
  useUpdateViewKnowStrategy,
  useUpdatSpareApplyStrategy,
  useUpdateCreateOrderStrategy,
  useAllowAntiFakeQueryStrategy,
  useUpdateChangeSparePriceStrategy,
  useUpdateallowUpdateSnCodeFun
} from '@/services/pages/network/list'
import infoTip from '@/config/info-tip'
import { HMessage, HMessageBox } from '@/components/common/message'

const { isEnableUpdateSparePrice, enableUpdateSparePriceLoading, enableUpdateSparePriceFn } =
  useUpdateChangeSparePriceStrategy()
const { autoSureReceiveOrder, updateAutoSureReceiveOrderLoading, updateAutoSureReceiveOrderFn } =
  useReceiveOrderStrategy()
const { autoCheckEndOrder, autoCheckEndOrderLoading, autoCheckEndOrderFn } =
  useAutoCheckEndOrder()
const { autoCheckCancelOrder, autoCheckCancelOrderLoading, autoCheckCancelOrderFn } =
  useAutoCheckCancelOrder()
const { isAllowAntiFakeQuery, allowAntiFakeQueryLoading, multipleUpdateAntiFakeQueryStrategy } =
  useAllowAntiFakeQueryStrategy()
const {
  isAllowCreateOrder,
  updateCreateOrderStrategyLoading,
  multipleUpdateCreateOrderStrategy,
} = useUpdateCreateOrderStrategy()
const { isAllowSpareApply, updateSpareApplyStrategyLoading, multipleUpdateSpareApplyStrategy } =
  useUpdatSpareApplyStrategy()
const { isAllowViewKnow, updateViewKnowStrategyLoading, multipleUpdateViewKnowStrategy } =
  useUpdateViewKnowStrategy()
const { allowUpdateSnCode,updateAllowUpdateSnCodeLoading,updateallowUpdateSnCodeFn } =useUpdateallowUpdateSnCodeFun()
defineOptions({
  name: 'NetworksStrategy',
})

const props = defineProps({
  networkIds: {
    type: Array as PropType<Array<string>>,
    required: true,
  },
})

const emits = defineEmits<{
  (e: 'update'): void
}>()

// 工单id集合
const ids = ref<Array<string>>([])

// 弹窗显示状态
const dialogVisible = ref(false)

// 更新策略加载
const loading:any = computed(() => {
  return (
    enableUpdateSparePriceLoading.value ||
    updateAutoSureReceiveOrderLoading.value ||
    autoCheckEndOrderLoading.value ||
    autoCheckCancelOrderLoading.value ||
    allowAntiFakeQueryLoading.value ||
    updateCreateOrderStrategyLoading.value ||
    updateSpareApplyStrategyLoading.value ||
    updateViewKnowStrategyLoading.value||
    updateAllowUpdateSnCodeLoading.value
  )
})

/**
 * 取消事件
 */
const onCancel = () => {
  dialogVisible.value = false
}

/**
 * 确定事件
 * @param {StrategyOperateType} type - 策略操作类型
 */
const onConfirm = async () => {
  Promise.all([
    enableUpdateSparePriceFn(props.networkIds),
    updateAutoSureReceiveOrderFn(props.networkIds),
    autoCheckEndOrderFn(props.networkIds),
    autoCheckCancelOrderFn(props.networkIds),
    multipleUpdateAntiFakeQueryStrategy(props.networkIds),
    multipleUpdateCreateOrderStrategy(props.networkIds),
    multipleUpdateSpareApplyStrategy(props.networkIds),
    multipleUpdateViewKnowStrategy(props.networkIds),
    updateallowUpdateSnCodeFn(props.networkIds)
  ]).then((res) => {
    const error = res.find((item) => item.code !== 20000)
    if (error) {
      HMessageBox.error(error.message)
      return
    }

    HMessage.success(infoTip.network.list.updateStrategySuccess)
    dialogVisible.value = false
    emits('update')
  })
}

watch(
  () => props.networkIds,
  (value) => {
    ids.value = value
  },
)
</script>

<template>
  <div>
    <h-button :disabled="!props.networkIds || props.networkIds.length <= 0"
      @click="dialogVisible = true">编辑策略</h-button>

    <h-dialog title="编辑策略" v-model="dialogVisible" :width="800" :loading="loading">
      <el-form class="modal_form_content" label-width="64">
        <el-form-item label="物料价格">
          <el-radio-group v-model="isEnableUpdateSparePrice">
            <el-radio :value="true" size="small">允许修改</el-radio>
            <el-radio :value="false" size="small">禁止修改</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="接单策略">
          <el-radio-group v-model="autoSureReceiveOrder">
            <el-radio :value="true" size="small">自动接单</el-radio>
            <el-radio :value="false" size="small">手动接单</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="结单审核">
          <el-radio-group v-model="autoCheckEndOrder">
            <el-radio :value="false" size="small">人工审核</el-radio>
            <el-radio :value="true" size="small">自动审核</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="取消工单">
          <el-radio-group v-model="autoCheckCancelOrder">
            <el-radio :value="false" size="small">人工审核</el-radio>
            <el-radio :value="true" size="small">自动审核</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="防伪查询">
          <el-radio-group v-model="isAllowAntiFakeQuery">
            <el-radio :value="false" size="small">不允许</el-radio>
            <el-radio :value="true" size="small">允许</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="新建工单">
          <el-radio-group v-model="isAllowCreateOrder">
            <el-radio :value="false" size="small">不允许</el-radio>
            <el-radio :value="true" size="small">允许</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="物料申请">
          <el-radio-group v-model="isAllowSpareApply">
            <el-radio :value="false" size="small">不允许</el-radio>
            <el-radio :value="true" size="small">允许</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="知识库查看">
          <el-radio-group v-model="isAllowViewKnow">
            <el-radio :value="false" size="small">不允许</el-radio>
            <el-radio :value="true" size="small">允许</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="修改序列号">
          <el-radio-group v-model="allowUpdateSnCode">
            <el-radio :value="false" size="small">不允许</el-radio>
            <el-radio :value="true" size="small">允许</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
        <h-button is-modal @click="onCancel">取消</h-button>
      </template>
    </h-dialog>
  </div>
</template>

<style lang="scss">
.modal_form_content {
  padding-top: 18px;
  column-gap: 48px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;

  .el-form-item {
    width: 210px;

    .el-form-item__label {
      padding: 0 4px 0 0 !important;
      justify-content: flex-end;
    }
  }
}
</style>
